.blinking {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 5px;
    position: relative;
    padding: 8px;
    span {
        width: 20px;
        height: 8px;
        display: inline-block;
        border-radius: 20px;
        background: #666;
        position: absolute;
        left: 50%;
        top: 50%;
        animation: 1s blink infinite;
        transform-origin: left top;
        &:nth-of-type(8) {
            transform: rotate(360deg) translateX(18px);
            animation-delay: 0s;
        }
    }
}

@keyframes blink {
    0% {
        opacity: 0.4;
    }
    30% {
        opacity: 0.6;
    }
    60% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

.loop(@counter) when (@counter<=7) {
    .loop(@counter+1);
    .blinking span:nth-of-type(@{counter}) {
        transform: rotate(45deg * @counter) translateX(18px);
        animation-delay: 0.125s * @counter;
    }
}
.loop(1);